/*
 * Copyright (c) 2025 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

// 页面上歌曲的图片
import React from 'react';
import {StyleSheet, Dimensions} from 'react-native';
import {
  GestureHandlerRootView,
  GestureDetector,
  Gesture,
} from '@react-native-oh-tpl/react-native-gesture-handler';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withSpring,
} from 'react-native-reanimated';
import {MusicPlayPageConstants} from '../../util/constants.tsx';

const ImageLogo: React.FC = () => {
  const isWide =
    Dimensions.get('screen').height >= 900 ||
    Dimensions.get('screen').width >= 900;
  // 放缩图片 --start
  let scale = useSharedValue(0.9);
  const savedScale = useSharedValue(0.9);
  const pinchGesture = Gesture.Pinch()
    .onBegin(e => {
      scale.value = savedScale.value;
    })
    .onUpdate(e => {
      let newScale = savedScale.value * e.scale;
      if (newScale >= MusicPlayPageConstants.MAX_SCALE) {
        newScale = MusicPlayPageConstants.MAX_SCALE;
      } else if (newScale <= MusicPlayPageConstants.MIN_SCALE) {
        newScale = MusicPlayPageConstants.MIN_SCALE;
      }
      scale.value = newScale;
    })
    .onEnd(() => {
      savedScale.value = scale.value;
    });
  //放缩图片 --end

  // 旋转--start
  const rotation = useSharedValue(0);
  const savedRotation = useSharedValue(0);
  // 创建旋转手势
  const rotationGestureForBackGround = Gesture.Rotation()
    .runOnJS(true)
    .onBegin(() => {
      // 手势开始时，保存当前角度
      savedRotation.value = rotation.value;
    })
    .onUpdate(e => {
      // 计算新角度（弧度转角度）
      let newRotation = savedRotation.value + e.rotation * (180 / Math.PI); // 转换为角度
      // 限制角度在0-90度之间
      newRotation = Math.max(0, Math.min(90, newRotation));
      rotation.value = isWide ? newRotation : 0;
    })
    .onEnd(() => {
      // 松手时回到最近 （0°或90°）
      if (rotation.value < 45) {
        rotation.value = withSpring(0);
      } else {
        rotation.value = withSpring(90);
      }
    });
  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{scale: scale.value}, {rotate: `${rotation.value}deg`}],
  }));
  // 旋转--end
  const composedGesture = Gesture.Simultaneous(
    Gesture.Simultaneous(pinchGesture, rotationGestureForBackGround),
  );
  return (
    // 图片的放缩
    <GestureHandlerRootView>
      <GestureDetector gesture={composedGesture}>
        <Animated.Image
          style={[
            isWide ? styles.imageArtworkBig : styles.defortImage,
            animatedStyle,
          ]}
          source={require('../../../../asset/artwork.png')}
          resizeMode="contain"
        />
      </GestureDetector>
    </GestureHandlerRootView>
  );
};

const styles = StyleSheet.create({
  defortImage: {
    width: '100%',
    height: '100%',
    marginTop: 30,
  },
  imageArtworkBig: {
    aspectRatio: 1,
    height: 320,
    marginTop: '18%',
    borderRadius: 10,
  },
});

export default ImageLogo;
